<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../dist/jspsych.js" ></script>
    <script src="../dist/plugin-survey-multi-select.js" ></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>   

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var multi_select_block = {
      type: jsPsychSurveyMultiSelect,
      questions: [
        {
          prompt: "Which of these colors do you like?", 
          options: ["Red", "Yellow", "Green", "Blue", "Black"], 
          horizontal: true,
          required: true,
          name: 'Colors'
        }, 
        {
          prompt: "Which of these foods do you like?", 
          options: ["Apples", "Bananas", "Carrots", "Donuts", "Eggplant"], 
          horizontal: true,
          required: true,
          name: 'Foods'
        }
      ], 
      randomize_question_order: true
    };

    jsPsych.run([multi_select_block]);

  </script>
</html>
